<template>
	<div class="comp-new">
		<el-form ref="newForm" :model="newForm" :label-width="120+'px'">
			<el-form-item label="任务名称：" prop="name" :rules="[{ required: true, message: '请输入任务名称' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
		  	</el-form-item>
		  	<el-form-item label="时间范围" prop="startTime" :rules="[{ required: true, message: '请选择时间范围' }]">
                <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    @change="onDateChange"
                >
                </el-date-picker>
            </el-form-item>
			<el-form-item label="所选设备：">
		    	<p v-for="(item,index) in maintenanceBookList" :key="index">{{item.name}}</p>
		  	</el-form-item>
		</el-form>
	</div>	
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'newMaintenanceDevice',
	props: {
        activePartition: {
			type: Object,
			default(){
				return {}
			},
		},
		activeData: {
			type: Object,
			default(){
				return null
			},
		},
        selectedDevice: {
            type: Array,
            default() {
                return []
            }
        },
		businessId: { //企业ID
			type: String,
			default: ''
		},
	},
	computed: {
		...mapState([
			'scale'
		]),
	},
	watch: {
		activeData () {
			this.initForm()
		}
	},
	data () {
		return {
            timeRange: [],
			newForm: {},
			loading: false,
            systemList: []
		}
	},
    computed: {
        maintenanceBookList () {
            return this.selectedDevice.map(item=>{
                const positionName = this.activePartition.name
                const {name,number,deviceTypeId,systemId} = item
                const temp = {name,number,deviceTypeId,systemId,positionName}
                return temp
            })
        }
    },
	created () {
		this.initForm()
	},
	methods: {
        onDateChange (value) {
            this.newForm.startTime = value[0]
            this.newForm.endTime = value[1]
        },
		initForm () {
			if(this.activeData){
				this.newForm = Object.assign({},this.activeData)
			}else{
                const maintenanceBookList= []
				this.newForm = {
                    maintenanceBookList: [],
                    businessId: this.businessId,
                    startTime:'',
                    endTime: ''
                }
				if(this.$refs['newForm']){
					this.$refs['newForm'].resetFields()
				}
			}
		},
		submitAction () {
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					this.$emit('submitting')
					this.loading = true
					let params = Object.assign({},this.newForm)
                    params.maintenanceBookList = this.maintenanceBookList
                    this.$post('/check/maintenance/taskAddOrUpdate', params).then(res=>{
                        this.loading = false
						this.$message.success('保存成功')
						this.$emit('success');
                    }, error => {
						this.loading = false
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
		},
	},
}
</script>